<template>
    <div class="sub-div-center" style="flex-wrap:wrap;">
        <diV class="sub-div-center context">
            <div class="item" v-for="item in datalist1">
                <el-image :src="item.url" fit="fill">
                    <template #error>
                        <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                        </div>
                    </template>
                </el-image>
            </div>
        </div>
        <diV class="sub-div-center context">
            <div class="item" v-for="item in datalist2">
                <el-image :src="item.url" fit="fill">
                    <template #error>
                        <div class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                        </div>
                    </template>
                </el-image>
            </div>
        </div>
    </div>
</template>

<script setup>
    var datalist1 = [
        { 'url': 'https://www.hexindev.fun/static/index/30001.jpg', 'to': '3' },
        { 'url': 'https://www.hexindev.fun/static/index/30002.jpg', 'to': '3' },
        { 'url': 'https://www.hexindev.fun/static/index/30003.jpg', 'to': '3' },
    ];
    var datalist2 = [
        { 'url': 'https://www.hexindev.fun/static/index/30004.jpg', 'to': '3' },
        { 'url': 'https://www.hexindev.fun/static/index/30005.jpg', 'to': '3' },
        { 'url': 'https://www.hexindev.fun/static/index/30006.jpg', 'to': '3' },
        ];
</script>

<style scoped>
.el-image{
    height: 100%;
    width: 100%;
}
.context{
    width: var(--content-width);
    justify-content: space-around;
}
.item{
    height: calc(0.5 *  var(--content-width));
    width: calc(0.33 *  var(--content-width));
    background-color:#ccc;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}
.item:hover{
    animation: change1 0.5s ease-out forwards; /* 应用动画 */  
    opacity:var(--opacity);
}

</style>